<!DOCTYPE html>
<html>
	<!-- 	1.按钮和DIV的单击事件（三种绑定方式）
		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮
		
		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	<head>
		<meta charset="utf-8" />
		<title>准备好了吗，开始敲代码啦！</title>
		<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
		<style type="text/css">
			#id1{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
			#id3{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<!-- 3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮 -->
		<!-- 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’ -->
		用户名：<input type="text" name="" id="username" value="" 
		onfocus="aa();" onblur="bb();" onchange="cc();"/>
		密码：<input type="password" name="" id="pwd" value="" 
		onfocus="aa1();" onblur="bb1();" onchange="cc1();"/>
		<button type="button" id="id2">提交</button>
		<div id="id1" onclick="bntClick1();" onmouseenter="enterdiv();" onmouseleave="leavediv()" onmousemove="removediv()">
		</div>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
		<button type="button" id="button1" onclick="bntClick();">按钮1</button>
		<button type="button" id="button2" >按钮2</button>
		<button type="button" id="button3" >按钮3</button>
		<button type="button" id="button4" >按钮4</button>
		
		<button type="button" id="btnAdd"  onclick="myaddlistener()">为按钮4添加监听器</button>&nbsp;&nbsp;
		<button type="button" id="btnRemove" onclick="myremovelistener()" >清除按钮4监听器</button>
		<!-- 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<div id="id3">
			</div>
		<button type="button" onclick="add();">添加监听器</button>&nbsp;&nbsp;
		<button type="button" onclick="remove()">清除监听器</button>
		
		
	</body>
	<script type="text/javascript">
	    <!-- 111111 -->
		function bntClick(){
			console.log('按钮被点击啦！')
		}
		 <!-- 22222 -->
		 // document.getElementById('button3').onclick = bntClick;
		document.getElementById('button2').onclick = function(){
			console.log('11111')
		};
		// 333333
		function myaddlistener(){
			// document.getElementById('button4').addEventListener('click',bntClick);
			document.getElementById('button4').addEventListener('click',function(){
				console.log('按钮4被点击了');
		})
		}
		function myremovelistener(){
			document.getElementById('button4').removeEventListener('click',bntClick);
		}
		
		function bntClick1(){
			console.log('点击div')
		}
		function enterdiv(){
			console.log('鼠标进入div')
			document.getElementById('id1').style.backgroundColor = 'red'
		}
		function leavediv(){
			console.log('鼠标离开div')
			document.getElementById('id1').style.backgroundColor = 'aqua'
		}
		function removediv(){
			console.log('鼠标移动')
		}
		function aa(){
			console.log('用户在输入名称！')
		}
		function cc(){
			console.log('值变啦！')
		}
		function bb(){
			console.log('输入完成！')
			if (document.getElementById('username').value == '') {
				alert('用户名不能为空！')
			}
		}
		function aa1(){
			console.log('用户在输入密码！')
		}
		function cc1(){
			console.log('值变啦！')
		}
		function bb1(){
			console.log('输入完成！')
			if (document.getElementById('pwd').value == '') {
				alert('密码不能为空！')
			}
		}
		function dd(){
			if (document.getElementById('pwd').value == '' && document.getElementById('username').value == '') {
				alert('用户名和密码不能为空！');			
				}else if(document.getElementById('username').value == ''){
				alert('用户名不能为空！')
			}
		}
		document.getElementById('id2').onclick=dd;
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function ee() {
			console.log('div被搅得一团乱')
		}
		function add() {
			document.getElementById('id3').addEventListener('mousemove',ee);
		}
		function remove() {
			document.getElementById('id3').removeEventListener('mousemove',ee);
		}
	</script>
</html>
